<template>
  <div class="related-stocks min-h-screen bg-gray-100 p-6">
    <header class="mb-6">
      <h1 class="text-3xl font-bold text-gray-800">关联股票推荐</h1>
      <p class="text-gray-600">基于您关注的股票，为您推荐相关性高的投资机会</p>
    </header>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- 关注股票列表 -->
      <div class="bg-white rounded-xl shadow-md p-6">
        <h2 class="text-xl font-bold mb-4 text-gray-800">关注股票</h2>
        <div class="space-y-3">
          <div v-for="stock in watchList" :key="stock.symbol" 
               class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
            <div>
              <h3 class="font-medium">{{ stock.symbol }}</h3>
              <p class="text-sm text-gray-500">{{ stock.name }}</p>
            </div>
            <span :class="stock.trend > 0 ? 'text-green-600' : 'text-red-600'">
              {{ stock.trend > 0 ? '+' : '' }}{{ stock.trend }}%
            </span>
          </div>
        </div>
      </div>

      <!-- 推荐股票列表 -->
      <div class="bg-white rounded-xl shadow-md p-6">
        <h2 class="text-xl font-bold mb-4 text-gray-800">推荐股票</h2>
        <div class="space-y-3">
          <div v-for="stock in recommendedStocks" :key="stock.symbol"
               class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
            <div>
              <h3 class="font-medium">{{ stock.symbol }}</h3>
              <p class="text-sm text-gray-500">{{ stock.name }}</p>
            </div>
            <button @click="addToWatchList(stock)"
                    class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full hover:bg-blue-200">
              添加关注
            </button>
          </div>
        </div>
      </div>

      <!-- 相关性分析 -->
      <div class="bg-white rounded-xl shadow-md p-6">
        <h2 class="text-xl font-bold mb-4 text-gray-800">相关性分析</h2>
        <div class="space-y-4">
          <div v-for="analysis in correlationAnalysis" :key="analysis.id"
               class="p-4 border border-gray-200 rounded-lg">
            <h3 class="font-medium mb-2">{{ analysis.title }}</h3>
            <p class="text-sm text-gray-600">{{ analysis.description }}</p>
            <div class="mt-2">
              <div class="w-full bg-gray-200 rounded-full h-2">
                <div class="bg-blue-600 h-2 rounded-full"
                     :style="{ width: `${analysis.correlation * 100}%` }">
                </div>
              </div>
              <p class="text-xs text-gray-500 mt-1">
                相关性: {{ (analysis.correlation * 100).toFixed(1) }}%
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 示例数据
const watchList = ref([
  { symbol: '000001', name: '平安银行', trend: 2.1 },
  { symbol: '600519', name: '贵州茅台', trend: -0.5 },
  { symbol: '300750', name: '宁德时代', trend: 1.3 },
]);

const recommendedStocks = ref([
  { symbol: '601398', name: '工商银行', reason: '同行业，相似业务模型' },
  { symbol: '600036', name: '招商银行', reason: '同行业，高相关性' },
  { symbol: '601288', name: '农业银行', reason: '同行业，业务协同' },
]);

const correlationAnalysis = ref([
  {
    id: 1,
    title: '行业相关性',
    description: '推荐股票与您关注的银行股具有很高的行业相关性',
    correlation: 0.85
  },
  {
    id: 2,
    title: '价格趋势相关性',
    description: '过去3个月的价格走势呈现高度相关',
    correlation: 0.72
  },
  {
    id: 3,
    title: '基本面相关性',
    description: '营收增长、利润率等关键指标相似',
    correlation: 0.68
  }
]);

const addToWatchList = (stock) => {
  // TODO: 实现添加到关注列表的逻辑
  console.log('添加到关注列表:', stock.symbol);
};
</script>